<script setup lang="ts">
import { useAppearanceSettingStore } from '@/store/modules/appearance-setting';

defineOptions({
  name: 'SwitchItem',
});

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
});

const emits = defineEmits<{
  (e: 'update:checked', checked: boolean): void;
}>();

interface Props {
  checked: boolean;
  disabled?: boolean;
  name: string;
}

const checked = computed(() => props.checked);

function handleUpdateChecked(value: boolean): void {
  emits('update:checked', value);
}

const darkClass = computed(() => {
  return useAppearanceSettingStore().getDarkTheme ? 'dark' : 'light';
});
</script>

<template>
  <div class="switch-item p-2 my-1" :class="darkClass">
    <span>{{ name }}</span>
    <NSwitch
      :value="checked"
      :disabled="disabled"
      @update:value="handleUpdateChecked"
    />
  </div>
</template>

<style scoped lang="less">
.switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 6px;
  &.light {
    &:hover {
      background: #f4f4f5;
    }
  }
  &.dark {
    &:hover {
      background: #18181c;
    }
  }
}
</style>
